import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { List, Avatar ,Table, Tag, Space,Button,Modal,
    Form, Input, Row ,Col, Checkbox ,Tabs, Typography, Divider,Radio,InputNumber,Select} from 'antd';
export default class Format_Info extends Component {
    constructor(props) {
        super(props)
        this.state = {
            //value:this.props.valueObj.text,  //文本
            value:this.props.initValues,  //文本
            radioValue:1
        }
    }

    closeSelf=()=>{
        this.props.onCancel();
    }

    confirm=()=>{
        //alert(this.state.value)
        let  _v=this.state.value;
        this.props.handleSave(_v);
    }

    onChange = (e) => {
        this.setState({ radioValue: e.target.value })
    }

    render() {
       // const {getFieldDecorator} = this.props.form;
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
        };


        const { TabPane } = Tabs;


        const radioStyle = {
            display: 'block',
            height: '30px',
            lineHeight: '30px',
        };

        function callback(key) {
            console.log(key);
        }


        const onChange = e => {
            console.log('radio checked', e.target.value);
            this.setState({
                radioValue: e.target.value,
            });
        };

        const onChangeAtInputNo=(value)=> {
            console.log('changed', value);
        }

        function handleChangeAtCurrency(value) {
            console.log(`selected ${value}`);
        }


        //函数组件
        const formatCell = (props) => {
            switch (props.type) {
                case 1: {
                    //语句
                    return <div>{"不包括特定格式"}</div>
                    break;
                }
                case 2: {
                    //语句

                    break;
                }
                case 3: {
                    //语句
                    return  <>
                        <Row>小数位数：<InputNumber min={0} max={4} defaultValue={2} onChange={onChangeAtInputNo} /></Row>
                        <Row>货币符号：
                            <Select defaultValue="rmb" style={{ width: 120 }} onChange={handleChangeAtCurrency}>
                                {/*<Option value="0">¥</Option>*/}
                                {/*<Option value="1">$</Option>*/}
                                {/*<Option value="2">€</Option>*/}
                            </Select>
                        </Row>

                    </>
                        }


                case 4: {
                    //语句
                    return <div>{4}</div>
                    break;
                }
                case 5: {
                    //语句
                    return <div>{5}</div>
                    break;
                }
                case 6: {
                    //语句
                    return <div>{6}</div>
                    break;
                }
                default: {
                    //语句
                    return <div>{1}</div>
                    break;
                }





            }
        }



        return (
            <>
                <Modal
                    width={840}
                    height={800}
                    title="设置单元格格式"
                    visible={this.props.visible}
                    confirmLoading={this.props.confirmLoading}
                    // onOk={this.props.handleSave}
                    //okText='保存'
                    cancelText='返回'
                    onCancel={this.props.onCancel}
                    footer={null}
                >
                    <>
                        <Tabs defaultActiveKey="1" onChange={callback}>
                            <TabPane tab="数字" key="1">
                                <div>分类：</div>
                                <div>
                                    <Row>
                                        <Col span={8}>
                                            <Radio.Group onChange={this.onChange} value={this.state.radioValue}>
                                                <Radio style={radioStyle} value={1}>
                                                常规
                                            </Radio>
                                                <Radio style={radioStyle} value={2}>
                                                    数值
                                                </Radio>
                                                <Radio style={radioStyle} value={3}>
                                                货币
                                            </Radio>
                                                <Radio style={radioStyle} value={4}>
                                                    会计专用
                                                </Radio>
                                                <Radio style={radioStyle} value={5}>
                                                    日期
                                                </Radio>
                                                <Radio style={radioStyle} value={6}>
                                                    时间
                                                </Radio>
                                            </Radio.Group>
                                        </Col>
                                        <Col span={16}>
                                            {   formatCell({type:this.state.radioValue})  }
                                         </Col>
                                    </Row>
                                </div>
                            </TabPane>
                            <TabPane tab="对齐" key="2">
                                Content of Tab Pane 2
                            </TabPane>
                            <TabPane tab="字体" key="3">
                                Content of Tab Pane 3
                            </TabPane>
                            <TabPane tab="边框" key="4">
                                Content of Tab Pane 4
                            </TabPane>
                            <TabPane tab="填充" key="5">
                                Content of Tab Pane 5
                            </TabPane>
                            <TabPane tab="保护" key="6">
                                Content of Tab Pane 6
                            </TabPane>
                        </Tabs>

                        <Row>
                            <Col span={16}></Col>
                            <Col span={3}><Button type="primary" onClick={this.confirm}>确定</Button></Col>
                            <Col span={3}><Button onClick={this.closeSelf}>取消</Button></Col>
                            <Col span={2}></Col>
                        </Row>

                    </>


                </Modal>


            </>
        );
    }

}

const styles = {
    focus: {
        width: '20px',
        opacity: 1
    },


    box:{
    display: 'flex',
    flexDirection: 'row'
    }
}


